<template>
  <div id="editor">
    <el-form ref="article" :model="article" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="article.title" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item label="类型">
        <el-cascader v-model="article.typeId" :options="typeTree" :props="casProp"></el-cascader>
      </el-form-item>
      <el-form-item label="等级">
        <el-input-number v-model="article.level" :min="0" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="置顶">
        <el-switch v-model="article.isTop" :active-value="true" :inactive-color="false">
      </el-switch>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="article.recommendLevel" :min="0" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="article.profile" placeholder="请输入简介" type="textarea"/>
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          :key="tag"
          v-for="tag in article.tagNameList"
          closable
          :disable-transitions="false"
          @close="handleClose(tag, 1)">
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleTagInputConfirm"
          @blur="handleTagInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showTagInput">+ 标签</el-button>
      </el-form-item>
      <el-form-item label="参考">
        <el-tag
          :key="tag"
          v-for="tag in article.refWebUrlList"
          closable
          :disable-transitions="false"
          @close="handleClose(tag, 2)">
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputRefVisible"
          v-model="inputRefValue"
          ref="saveRefInput"
          size="small"
          @keyup.enter.native="handleRefInputConfirm"
          @blur="handleRefInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showRefInput">+ 网址</el-button>
      </el-form-item>
      <el-form-item label="内容">
        <editorItem :article="article"/>
      </el-form-item>
    </el-form>
    <el-button id="button" type="primary" @click="addArticle" round>提交</el-button>
  </div>
</template>

<script>
import editorItem from '@c/editor/editor'
import { getArticleTypeListApi } from '@/api/home/home'
import { addArticleApi, updateArticleApi } from '@/api/editor'
import { showResponse } from '@/util/ResponseUtil'
import { list2tree } from '@/util/ArticleTypeUtil'
import { getArticleByIdApi } from '@/api/article-detail'

export default {
  name: 'editor',
  components: {
    editorItem
  },
  data () {
    return {
      id: this.$route.query.id,
      article: {
        level: 0,
        recommendLevel: 0,
        isTop: false,
        tagNameList: [],
        refWebUrlList: []
      },
      typeTree: [],
      casProp: {
        // 可选叶子节点
        checkStrictly: true,
        // 触发方式为hover
        expandTrigger: 'hover',
        // 只返回选中值
        emitPath: false
      },
      inputVisible: false,
      inputValue: '',
      inputRefVisible: false,
      inputRefValue: ''
    }
  },
  mounted () {
    this.getTypeList()
    this.getArticle()
  },
  methods: {
    async addArticle () {
      if (this.id) {
        this.article.id = this.id
        let res = await updateArticleApi(this.article)
        if (showResponse(res, '修改失败', '修改成功')) {

        }
      } else {
        let res = await addArticleApi(this.article)
        if (showResponse(res, '新增失败', '新增成功')) {
          this.set(this, 'article', {
            level: 0,
            recommendLevel: 0,
            tagNameList: [],
            refWebUrlList: []
          })
        }
      }
    },
    async getArticle () {
      if (this.id) {
        let res = await getArticleByIdApi(this.id)
        this.article = res.data
      }
    },
    async getTypeList () {
      let res = await getArticleTypeListApi({}, true)
      this.typeTree = list2tree(res.data)
    },
    handleClose (tag, type) {
      switch (type) {
        case 1:
          this.article.tagNameList.splice(this.article.tagNameList.indexOf(tag), 1)
          break
        case 2:
          this.article.refWebUrlList.splice(this.article.refWebUrlList.indexOf(tag), 1)
      }
    },
    showTagInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    showRefInput () {
      this.inputRefVisible = true
      this.$nextTick(_ => {
        this.$refs.saveRefInput.$refs.input.focus()
      })
    },
    handleTagInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.article.tagNameList.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleRefInputConfirm () {
      let inputValue = this.inputRefValue
      if (inputValue) {
        this.article.refWebUrlList.push(inputValue)
      }
      this.inputRefVisible = false
      this.inputRefValue = ''
    }
  }
}
</script>

<style scoped lang="scss">
#editor {
  padding: 50px 15%;
  width: 70%;
  background: black;
  .el-tag {
    margin-right: 10px;
  }
  .button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    vertical-align: bottom;
  }
}
#button {
  margin-left: calc(100% - 75px);
}

</style>
